{% extends "layout.html" %}

{% block content %}
<script src="../static/js/jquery.min.js" type="text/javascript" charset='utf-8'></script>
<script src="../static/js/echarts.js" charset='utf-8'></script>

<!--<script type="text/javascript">-->
<!--    // 初始化界面-->
<!--    $(function () {-->

<!--        $('#li_1').attr('class', 'active');-->
<!--        $('#li_2').attr('class', '');-->
<!--        $('#li_3').attr('class', '');-->
<!--        $('#li_4').attr('class', '');-->
<!--        $('#li_5').attr('class', '');-->
<!--        $('#li_6').attr('class', '');-->
<!--        $('#li_7').attr('class', '');-->

<!--        $.get('/query_spidered_data', {},-->
<!--            function (data) {-->
<!--                console.log(data);-->
<!--                data.forEach((job, index) => {-->
<!--                    $('#items').append('<tr><td>' + job[0] + '</td><td>' + job[1] + '</td><td>' + job[2] + '</td><td>' + job[3] + '</td><td>' + job[4] + '</td><td>' + job[5] + '</td><td>' + job[6] + '</td><td>' + job[7] + '</td><td>' + job[8] + '</td></tr>')-->
<!--                });-->
<!--            }-->
<!--        );-->
<!--    });-->
<!--</script>-->



<!--<div class="container">-->
<!--    &lt;!&ndash;右边展示&ndash;&gt;-->
<!--    <h3 class="page-header">各大细分行业招聘岗位部分信息展示</h3>-->
<!--    <div class="row">-->
<!--        <div class="col-lg-12">-->
<!--            <table class="table table-striped table-hover" style="margin-top: 20px; font-size: 15px" align="left">-->
<!--                <thead>-->
<!--                <tr>-->
<!--                    <th style="width: 22%;">岗位名称</th>-->
<!--                    <th style="width: 12%;">所属细分行业</th>-->
<!--                    <th style="width: 12%;">公司</th>-->
<!--                    <th style="width: 6%;">地点</th>-->
<!--                    <th style="width: 8%;">薪资</th>-->
<!--                    <th style="width: 10%;">工作经验要求</th>-->
<!--                    <th style="width: 8%;">学历要求</th>-->
<!--                    <th style="width: 6%;">人数</th>-->
<!--                    <th style="width: 8%;">发布时间</th>-->
<!--                </tr>-->
<!--                </thead>-->
<!--                <tbody id="items">-->
<!--                </tbody>-->
<!--            </table>-->
<!--        </div>-->
<!--    </div>-->
<!--</div>-->





<script type="text/javascript">
    // 初始化界面
    $(function () {
        $('#li_1').attr('class', 'active');
        $('#li_2').attr('class', '');
        $('#li_3').attr('class', '');
        $('#li_4').attr('class', '');
        $('#li_5').attr('class', '');
        $('#li_6').attr('class', '');
        $('#li_7').attr('class', '');

        // 默认加载第一页数据
        loadJobs(1);

        // 分页按钮点击事件
        $(document).on('click', '.page-link', function () {
            var page = $(this).data('page');
            var keyword = $('#search-input').val(); // 获取搜索框中的关键词
            loadJobs(page, keyword);
        });

        // 搜索按钮点击事件
        $('#search-button').click(function () {
            var keyword = $('#search-input').val(); // 获取搜索框中的关键词
            loadJobs(1, keyword); // 重新加载第一页数据，并带上搜索关键词
        });
    });

    function loadJobs(page, search = '') {
        $.get('/query_spidered_data', { page: page, per_page: 10, search: search },
            function (data) {
                console.log(data);

                // 清空表格内容
                $('#items').empty();

                // 添加数据到表格
                data.data.forEach((job, index) => {
                    $('#items').append('<tr><td>' + job[0] + '</td><td>' + job[1] + '</td><td>' + job[2] + '</td><td>' + job[3] + '</td><td>' + job[4] + '</td><td>' + job[5] + '</td><td>' + job[6] + '</td><td>' + job[7] + '</td><td>' + job[8] + '</td></tr>');
                });

                // 清空分页按钮
                $('#pagination').empty();

                // 添加分页按钮
                const maxPagesToShow = 5; // 最多显示的页码数量
                const halfMaxPages = Math.floor(maxPagesToShow / 2);
                let startPage = Math.max(1, page - halfMaxPages);
                let endPage = Math.min(data.total_pages, startPage + maxPagesToShow - 1);

                // 如果最后一页不够，调整起始页
                if (endPage - startPage < maxPagesToShow - 1) {
                    startPage = Math.max(1, endPage - maxPagesToShow + 1);
                }

                // 添加“第一页”按钮
                if (page > 1) {
                    $('#pagination').append('<li class="page-item"><a class="page-link" data-page="1">第一页</a></li>');
                }

                // 添加“上一页”按钮
                if (page > 1) {
                    $('#pagination').append('<li class="page-item"><a class="page-link" data-page="' + (page - 1) + '">上一页</a></li>');
                }

                // 添加页码按钮
                for (let i = startPage; i <= endPage; i++) {
                    $('#pagination').append('<li class="page-item ' + (i === page ? 'active' : '') + '"><a class="page-link" data-page="' + i + '">' + i + '</a></li>');
                }

                // 添加“下一页”按钮
                if (page < data.total_pages) {
                    $('#pagination').append('<li class="page-item"><a class="page-link" data-page="' + (page + 1) + '">下一页</a></li>');
                }

                // 添加“最后一页”按钮
                if (page < data.total_pages) {
                    $('#pagination').append('<li class="page-item"><a class="page-link" data-page="' + data.total_pages + '">最后一页</a></li>');
                }

                // 显示总页数和总数据量
                $('#pagination-info').text('总页数: ' + data.total_pages + '，总数据量: ' + data.total_count);
            }
        );
    }
</script>

<div class="container">
    <!--右边展示-->
    <h3 class="page-header">岗位数据</h3>

    <div class="row">
        <div class="col-lg-12 d-flex align-items-center">
            <input type="text" id="search-input"  placeholder="搜索岗位名称">
            <button id="search-button" class="btn btn-primary">搜索</button>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-12">
            <table class="table table-striped table-hover" style="margin-top: 20px; font-size: 15px" align="left">
                <thead>
                <tr>
                    <th style="width: 22%;">岗位名称</th>
                    <th style="width: 12%;">所属细分行业</th>
                    <th style="width: 12%;">公司</th>
                    <th style="width: 6%;">地点</th>
                    <th style="width: 8%;">薪资</th>
                    <th style="width: 10%;">工作经验要求</th>
                    <th style="width: 8%;">学历要求</th>
                    <th style="width: 6%;">招聘人数</th>
                    <th style="width: 8%;">发布时间</th>
                </tr>
                </thead>
                <tbody id="items">
                </tbody>
            </table>
        </div>
    </div>
    <nav aria-label="Page navigation example">
        <ul class="pagination" id="pagination">
        </ul>
    </nav>
    <div id="pagination-info"></div>
</div>


{% endblock %}
